<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('查看销售订单')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <h4 class="col-sm-12 form-header h4">订单信息 &nbsp;&nbsp;&nbsp; 订单号：<span id="orderId" th:text="${orderId}" style="font-size: 15px"></span></h4>
    <form>
        <div class="row col-sm-12">
            <div class="select-list col-sm-9" id="userWorker" >
                <ul>
                    <li class="col-sm-2">
                        <label style="width: 50%">水电师傅：</label>
                        <label th:text="${hhOrder.workerName}" style="width: 50%"></label>
                    </li>
                    <li class="col-sm-3">
                        <label class="text-center">客户名称：</label>
                        <label class="text-center" th:text="${hhOrder.consumerName}" style="width: 50%"></label>
                    </li>
                    <li class="col-sm-2">
                        <label class="text-center" style="width: 50%">联系方式：</label>
                        <label class="text-center" th:text="${hhOrder.phoneNumber}"></label>
                    </li>
                    <li class="col-sm-2">
                        <label class="text-center" style="width: 50%">开单时间：</label>
                        <label class="text-center" th:text="${hhOrder.orderDate}" style="width: 50%"></label>
                    </li>
                    <li class="col-sm-2">
                        <label class="text-center" style="width: 50%">备注说明：</label>
                        <label class="text-center" th:text="${hhOrder.remark}"></label>
                    </li>
                </ul>
            </div>
            <div class="col-sm-3 text-center">
                <button class="btn btn-success dim" type="button" onclick="orderPrint()"><i class="fa fa-print"></i>&nbsp;打印预览</button>
            </div>
        </div>
    </form>
    <div class="form-group"></div>
    <h4 class="col-sm-12 form-header h4">订单明细信息</h4>
    <div class="row">
        <div class="col-sm-12">
            <form id="formId">
                <div class="select-list">
                    <input type="hidden" name="orderId" th:value="${orderId}">
                    <ul>
                        <li>
                            <label>找商品：</label>
                            <input type="text" name="productName" id="productName"/>
                        </li>
                        <li>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="tableRefresh()"><i class="fa fa-refresh"></i>&nbsp;全部</a>
                        </li>
                    </ul>
                </div>
            </form>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">

    $(function() {
        var options = {
            url: ctx + "order/detail/list",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            modalName: "销售订单明细",
            columns: [
                {
                    field: 'odId',
                    title: '明细id',
                    visible: false
                },
                {
                    title: "序号",
                    align: 'center',
                    formatter: function (value, row, index) {
                        return $.table.serialNumber(index);
                    }
                },
                {
                    field: 'productName',
                    width: '20',
                    widthUnit: '%',
                    title: '商品名'
                },
                {
                    field: 'productBrand',
                    title: '品牌',
                    align: 'center'
                },
                {
                    field: 'productNum',
                    title: '数量',
                    align: 'center'
                },
                {
                    field: 'productUnit',
                    title: '单位',
                    align: 'center'
                },
                {
                    field: 'detailPrice',
                    title: '单价',
                    align: 'center'
                },
                {
                    field: 'detailAmount',
                    title: '金额',
                    align: 'center'
                },
                {
                    field: 'remark',
                    title: '备注',
                    align: 'center'
                }]
        };
        $.table.init(options);
        $.table.search('formId', 'bootstrap-table');
    });


    //查找订单中的商品
    $("#productName").keyup(function () {
        $.table.search('formId', 'bootstrap-table');
    });

    //打印预览
    function orderPrint() {
        layer.open({
            type: 2,
            area: ['900px', '700px'],
            fix: false,
            shade: 0.3,
            title: '打印预览',
            content: ctx + "order/detail/print/" + $("#orderId").text() ,
            btn: ['关闭'],
            end: function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
        });
    }

    function tableRefresh() {
        $("#productName").val('');
        $.table.refresh();
    }

</script>
</body>
</html>